* {
	font-size: 1em;
	box-sizing: border-box;
	padding: 0px;
	margin: 0px;
}

img {
	display: block;
}

body {
	width: 100vw;
	height: 100vh;
	position: relative;
	
}

#bg {
	width: 100vw;
	height: 133.067vw;
	position: absolute;
	bottom: 0px;
}

#page {

	position: absolute;
	bottom: 0;
	width: 100vw;
	height: 133.067vw;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;

}

#title,
#content,
#bottom {
	width: 100%;

	padding: 0px 1.333vw;
}

#title {
	height: 15%;
	display: flex;
	align-items: start;
	justify-content: space-between;

}

#gb,
#gd {
	width: 10.667vw;
	height: 10.667vw;
	display: block;

}

#bt {
	left: 50%;
	right: 50%;
	transform: translate(-50%, -50%);
	position: absolute;
	width: 45.067vw;
	height: 32.533vw;
}

#title_text1 {
	z-index: 1;
	display: none;
	width: 21.333vw;
	height: 31.467vw;
	background-image: url("bluck/cjyy_gd_bg1.png");
	background-size: contain;
	background-position: center;
	position: absolute;
	right: 1%;
	top: 10%;
}

#title_text1_content {
	display: flex;
	width: 100%;
	height: 100%;
	flex-direction: column;
	background-color: rgb(249, 250, 227);
	text-align: center;
	justify-content: center;
	background-clip: content-box;
	padding: 10% 5% 5% 5%;
	border-radius: 15px;
}

#title_text1_content div {
	font-size: 3.5vw;
	color: black;
	opacity: 0.8;
	padding: 10% 0px;
}

#content {

	height: 60%;

	position: relative;
}

#content_text1 {
	color: white;
	position: absolute;
	right: 7%;
	top: 20%;
	opacity: 0.8;
	font-size: 3vw;
	text-align: center;
}

#slogans {
	width: 100%;
	top: -5%;
	height: 15%;
	position: absolute;
	color: #ffffff;
	overflow: hidden;
}
#slogans_text1,#slogans_text2{
	background-color: rgba(229, 229, 229, 0.7);
	border-radius: 3vw;
	width: 30vw;
	text-align: center;
	font-size: 2.5vw;
	padding: 0.4vw 0;
	position: absolute;
	right: -50%;
	
}
#slogans_text1{
	top: 0px;
	transition: right linear 4s;
}
#slogans_text2{
	bottom: 0px;
	transition: right linear 4s;
}

#lw,
#fdj {
	width: 14.4vw;
	height: 15.467vw;
}

.ducks {
	width: 20.267vw;
	height: 20.267vw;
	position: absolute;


}

#duck1 {
	left: 20%;
	top: 25%;
}

#duck2 {
	right: 35%;
	top: 40%;
}

#duck3 {
	right: 15%;
	top: 30%;
}

#duck4 {
	bottom: 25%;
	left: 1%;
}

#duck5 {
	left: 25%;
	bottom: 20%;
}

#duck6 {
	right: 5%;
	bottom: 15%;
}


#bottom {

	height: 30%;
	position: relative;
}

#up_buttons {
	width: 100%;
	height: 30%;
	position: absolute;
	display: flex;

	top: -10%;
	justify-content: space-between;
	padding: 0px 15%;

}

#qq,
#sjq {
	width: 29.867vw;
	height: 13.333vw;
}



#sj {
	width: 2.4vw;
	height: 1.2vw;
	display: inline-block;
}

#bottom_text1 {
	height: fit-content;
	font-size: 2.133vw;
	position: absolute;
	right: 35%;
	color: white;
	top: 33%;

}

#bottom_text2 {
	position: absolute;
	display: flex;
	flex-direction: column;
	font-size: 2.133vw;
	background: linear-gradient(0deg, red, orange 50%);
	top: -100%;
	right: 36%;
	display: none;
}

#bottom_text2 div {
	padding: 0.267vw 1.333vw;
	color: white;
	font-weight: 200;

}

#bottom_text3 {

	color: white;
	font-size: 3.5vw;

}

#bottom_text3 span {
	opacity: 0.7;
}

#mid_buttons {

	width: 100%;
	height: 40%;
	display: flex;
	align-items: end;
	justify-content: space-between;
	padding: 0px 24% 1% 26%;
}

#mid_buttons span {
	opacity: 0.8;
}

#mid_b1,
#mid_b2 {
	color: white;
	display: flex;
	font-size: 4vw;
	align-items: baseline;
}

#jb {
	width: 3vw;
	height: 3vw;
}

#last_buttons {
	width: 100%;
	height: 26%;
	padding-bottom: 1%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	position: relative;
}


#xh {
	width: 8vw;
	height: 8vw;
	display: inline-block;
	position: absolute;
	top: 15%;

}
.paopao{
	background-image: url("bluck/cjff_qp_da.png");
	background-size: contain;
	background-position: center;
}